<!DOCTYPE html>
<html lang="zh_CN">
	<head>
		<meta charset="UTF-8">
		<title>ShortLinks - 短链生成器</title>
		<script src="/resources/js/jquery-3.1.1.min.js"></script>
		<link rel="icon" type="image/x-icon" href="/resources/images/favicon.ico">
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: "Microsoft YaHei UI Light", serif;
			}
			.max-div-box {
				z-index: 2;
				margin: 60px auto;
				width: 800px;
			}

			/* 顶部标题 */
			.title-div-box {
				width: 800px;
				height: 70px;
			}
			.title-div-box h1 {
				text-align: center;
				color: #845EC2;
				font-size: 40px;
				line-height: 70px;
			}
			.title-div-box p {
				height: 50px;
				color: #845EC2;
				line-height: 30px;
				text-align: center;
				font-size: 18px;
			}

			/* 长链接输入 */
			.input-div-box {
				width: 800px;
				margin-top: 80px;
			}
			.link-input-div-box {
				padding: 20px 20px;
				box-sizing: border-box;
				width: 800px;
				height: 90px;
				border: 1px solid #845EC2;
				border-radius: 10px;
			}
			.link-input-div-box input {
				float: left;
				width: 500px;
				height: 50px;
				outline: none;
				border: none;
				font-size: 20px;
			}
			.link-input-div-box button {
				margin-left: 15px;
				float: right;
				width: 110px;
				height: 50px;
				outline: none;
				border: none;
				color: #ffffff;
				font-size: 18px;
				border-radius: 5px;
				background-color: #845EC2;
				cursor: pointer;
			}
			.input-div-box p {
				margin-top: 10px;
				height: 20px;
				line-height: 20px;
				color: #FF0000;
				display: none;
			}

			/* 长链接配置 */
			.setting-div-box {
				margin-top: 30px;
				width: 800px;
				height: 170px;
			}
			.setting-div-box p {
				padding-left: 10px;
				box-sizing: border-box;
				font-size: 14px;
				border-left: 4px solid #845EC2;
			}
			.setting-div-box .link-setting-div-box {
				margin-top: 10px;
				padding: 20px 20px;
				box-sizing: border-box;
				width: 800px;
				height: 180px;
				border: 1px solid #845EC2;
				border-radius: 10px;
			}
			.link-setting-div-box .link-setting-item-div-box {
				float: left;
				margin-right: 20px;
				margin-bottom: 10px;
				width: 300px;
				height: 40px;
				color: #3f3f3f;
				font-size: 14px;
				line-height: 40px;
			}
			.link-setting-item-div-box span {
				font-weight: bold;
				font-size: 14px;
			}
			.link-setting-item-div-box input {
				padding: 10px;
				box-sizing: border-box;
				width: 200px;
				height: 35px;
				outline: none;
				border: 1px solid #a1a1a1;
				border-radius: 3px;
				font-size: 13px;
			}

			/* 短链接结果 */
			.result-div-box {
				margin-top: 65px;
				width: 800px;
			}
			.result-div-box .link-result-p-box {
				padding-left: 10px;
				box-sizing: border-box;
				font-size: 14px;
				border-left: 4px solid #845EC2;
			}
			.result-div-box .link-result-div-box {
				margin-top: 10px;
				padding: 15px 20px;
				box-sizing: border-box;
				width: 800px;
				height: 60px;
				border: 1px solid #845EC2;
				border-radius: 10px;
			}
			.link-result-div-box a {
				width: 400px;
				height: 30px;
				text-align: left;
				line-height: 30px;
				font-size: 18px;
				color: #3f3f3f;
			}
			.link-result-div-box button {
				margin-left: 15px;
				float: right;
				width: 80px;
				height: 30px;
				outline: none;
				border: none;
				font-size: 13px;
				color: #ffffff;
				border-radius: 5px;
				background-color: #845EC2;
				cursor: pointer;
			}
			.link-result-div-box .result-button2-box {
				float: right;
				background-color: #D65DB1;
			}
			.result-div-box .link-result-p2-box {
				margin-top: 10px;
				height: 20px;
				line-height: 20px;
				color: #219847;
				font-size: 15px;
				display: none;
			}

			/* 扣6 */
			.max-6-div-box {
				z-index: 1;
				position: absolute;
				top: 150px;
				left: 50%;
				margin-left: -700px;
				width: 1400px;
				height: 500px;
				font-weight: bold;
				font-size: 300px;
				line-height: 400px;
				text-align: center;
				color: #D65DB1;
				text-shadow: 15px 15px 5px #da2ba5;
				display: none;
			}

			/* 底部盒子 */
			.max-bottom-box {
				position: absolute;
				left: 50%;
				margin-left: -400px;
				bottom: 20px;
				width: 800px;
			}
			.max-bottom-box p, .max-bottom-box a {
				display: inline-block;
				width: 800px;
				height: 25px;
				text-align: center;
				line-height: 25px;
				font-size: 13px;
				color: #3f3f3f;
				text-decoration:none;
			}
		</style>
	</head>
	<body>
		<div class="max-6-div-box" id="max-6-div-box">感谢扣6~</div>
		<div class="max-div-box">
			<div class="title-div-box">
				<h1>短链.xyz</h1>
				<p>免费开源的短链接生成器，可以将您的长链接变得更短，觉得好用请扣
					<span style="font-size: 35px;font-weight: bold;cursor: pointer" onclick="kou6()"> 6 </span>。</p>
			</div>
			<form id="linksForm">
				<div class="input-div-box">
					<div class="link-input-div-box">
						<label for="sourceUrl">
							<input type="text" name="sourceUrl" id="sourceUrl" placeholder="请输入 http:// 或 https:// 开头的链接" maxlength="400">
						</label>
						<button style="background-color: #FF6F91" type="submit" onclick="submitBatchForm(event)">批量生成</button>
						<button type="submit" onclick="submitForm(event)">生成短链</button>
					</div>
					<p id="errorMessage"></p>
				</div>
				<div class="setting-div-box">
					<p>短链接配置参数，不配置默认为永久有效，可按需配置。</p>
					<div class="link-setting-div-box">
						<div class="link-setting-item-div-box">
							<span>生效时间：</span>
							<label for="enableTime">
								<input type="datetime-local" name="enableTime" id="enableTime" step="01"
								       class="measureDate" placeholder="请选择短链生效时间">
							</label>
						</div>
						<div class="link-setting-item-div-box">
							<span>过期时间：</span>
							<label for="disableTime">
								<input type="datetime-local" name="disableTime" id="disableTime" step="01"
								       class="measureDate" placeholder="请选择短链过期时间">
							</label>
						</div>
						<div class="link-setting-item-div-box">
							<span>访问次数：</span>
							<label for="allowTotal">
								<input type="number" name="allowTotal" id="allowTotal" placeholder="请输入短链可用访问次数">
							</label>
						</div>
						<div class="link-setting-item-div-box">
							<span>访问密码：</span>
							<label for="accessPassword">
								<input type="text" name="accessPassword" id="accessPassword" maxlength="20" placeholder="请输入短链访问密码">
							</label>
						</div>
						<div class="link-setting-item-div-box">
							<span>链接文件：</span>
							<label for="batchFile">
								<input type="file" name="batchFile" id="batchFile" accept="text/plain">
							</label>
						</div>
						<div class="link-setting-item-div-box">
							<span>生成数量：</span>
							<label for="batchSize">
								<input type="number" name="batchSize" id="batchSize" placeholder="请输入短链批量生成数量">
							</label>
						</div>
					</div>
				</div>
			</form>
			<div class="result-div-box">
				<p class="link-result-p-box">
					短链接生成结果，例如：
					<a th:href="${indexExampleLink}" th:text="${indexExampleLink}" style="text-decoration:none;color: #3f3f3f;" target="_blank"></a>
				</p>
				<div class="link-result-div-box">
					<a id="shortLinks" style="text-decoration:none;" target="_blank"></a>
					<button class="result-button2-box" onclick="easyClean()">一键清除</button>
					<button class="result-button-box" onclick="easyCopy()">一键复制</button>
				</div>
				<p class="link-result-p2-box" id="resultMessage"></p>
			</div>
		</div>
		<div class="max-bottom-box">
			<p>
				小的用爱发电，各位老爷们手下留情莫攻击，项目开源地址：
				<a href="https://gitee.com/TanXaio/tanxiao-short-links" style="display: inline" target="_blank">Gitee</a>
			</p>
			<a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备20001212号-3</a>
			<p>© 2023 https://短链.xyz 版权所有</p>
		</div>
	</body>
	<script>
		/**
		 * 提交生成短链请求
		 */
		function submitForm(event) {
			// 阻止表单默认提交行为
			event.preventDefault();

			// 清除短链结果
			const shortLinks = $("#shortLinks");
			shortLinks.html("");
			// 清除结果提示
			$("#resultMessage").attr("style", "display: none");
			// 清除输入提示
			const errorMessage = $("#errorMessage");
			errorMessage.attr("style", "display: block")

			const sourceUrl = $("#sourceUrl").val();
			if (sourceUrl === null || sourceUrl === undefined || sourceUrl === "") {
				errorMessage.css("color", "#FF0000");
				errorMessage.html("请先输入原始长链接");
				return;
			} else {
				errorMessage.css("color", "#219847");
				errorMessage.html("请求已提交，请稍等...");
			}

			const form = document.getElementById("linksForm");
			const formData = new FormData(form);
			const json = {};
			formData.forEach((value, key) => {
				if (value === null || value === undefined || value === "") {
					value = null;
				}
				if (key === "enableTime" || key === "disableTime") {
					if (value !== null && value.length < 19) {
						value += ":00";
					}
				}
				json[key] = value;
			});

			$.ajax({
				type: "POST",
				url: "/links/short",
				contentType: "application/json",
				dataType: "json",
				data: JSON.stringify(json),
				success: function (r) {
					if (r.code === 200) {
						setTimeout(function () {
							shortLinks.attr("href", r.data);
							shortLinks.html(r.data);
							errorMessage.attr("style", "display: none");
						}, 300)
					} else {
						errorMessage.attr("style", "display: block");
						errorMessage.html(r.message);
					}
				},
				error: function (e) {
					errorMessage.attr("style", "display: block");
					errorMessage.html("短链生成失败：" + e);
				}
			});
		}


		/**
		 * 提交批量生成短链请求
		 */
		function submitBatchForm(event) {
			// 阻止表单默认提交行为
			event.preventDefault();

			// 清除短链结果
			const shortLinks = $("#shortLinks");
			shortLinks.html("");
			// 清除结果提示
			$("#resultMessage").attr("style", "display: none");
			const errorMessage = $("#errorMessage");

			const form = document.getElementById("linksForm");
			const formData = new FormData(form);
			formData.forEach((v, k) => {
				if (k === "enableTime" || k === "disableTime") {
					if (v !== "" && v.length < 19) {
						formData.set(k, v + ":00");
					}
				}
			});

			$.ajax({
				type: "POST",
				url: "/links/batch/short",
				contentType: false,
				processData: false,
				data: formData,
				success: function (r) {
					if (r.code === 200) {
						errorMessage.attr("style", "display: none");
						const taskId = r.data;
						shortLinks.html("任务提交成功，请耐心等待");
						let timer = setInterval(() => {
							$.ajax({
								type: "GET",
								url: "/links/batch/" + taskId,
								dataType: "json",
								success: function (r) {
									if (r.code === 200) {
										const taskData = r.data;
										if (taskData !== null) {
											if (taskData.status === 0 || taskData.status === 1 || taskData.status === 2) {
												shortLinks.html(taskData.message + getLoadingPoint());
											}
											if (taskData.status === 3) {
												clearInterval(timer);
												shortLinks.html(taskData.message + " (耗时：" + taskData.taskTime + "秒)");
												window.location.href = taskData.downloadUrl;
											}
											if (taskData.status === 4) {
												clearInterval(timer);
												shortLinks.html(taskData.message + getLoadingPoint());
											}
										} else {
											clearInterval(timer);
											shortLinks.html("查询短链批量生成任务状态失败，该任务不存在。");
										}
									} else {
										clearInterval(timer);
										shortLinks.html(r.message);
									}
								},
								error: function (e) {
									clearInterval(timer);
									shortLinks.html("查询短链批量生成任务状态失败");
								}
							});
						}, 1000)
					} else {
						errorMessage.attr("style", "display: block");
						errorMessage.html(r.message);
					}
				},
				error: function (e) {
					errorMessage.attr("style", "display: block");
					errorMessage.html("短链批量生成失败：" + e);
				}
			});
		}


		/**
		 * 一键复制
		 */
		function easyCopy() {
			const resultMessage = $("#resultMessage");
			const shortLinks = $("#shortLinks").html();
			if (shortLinks === undefined || shortLinks === null || shortLinks === '') {
				resultMessage.attr("style", "display: block");
				resultMessage.css("color", "#FF0000");
				resultMessage.html("请先生成短链");
			} else {
				const copy = document.createElement("input");
				copy.setAttribute("value", shortLinks);
				document.body.appendChild(copy);
				copy.select();
				document.execCommand("copy");
				document.body.removeChild(copy);
				resultMessage.attr("style", "display: block");
				resultMessage.css("color", "#219847");
				resultMessage.html("已复制到剪贴板");
			}
		}


		/**
		 * 一键清除
		 */
		function easyClean() {
			// 清除输入提示
			$("#errorMessage").attr("style", "display: none");
			// 清除结果提示
			$("#resultMessage").attr("style", "display: none");
			// 清除结果
			$("#shortLinks").html("");
			// 清除表单输入
			$("#linksForm :input").val("");
		}


		/**
		 * 扣6事件
		 */
		function kou6() {
			const div6 = $("#max-6-div-box");
			div6.attr("style", "display: block")
			setTimeout(function () {
				div6.attr("style", "display: none");
			}, 1000)
		}


		/**
		 * 获取等待点字符
		 */
		let index = 0;
		function getLoadingPoint() {
			switch (index) {
				case 0 : {
					index = 1;
					return ".";
				}
				case 1 : {
					index = 2;
					return "..";
				}
				case 2 : {
					index = 3;
					return "...";
				}
				case 3 : {
					index = 4;
					return "....";
				}
				case 4 : {
					index = 0;
					return ".....";
				}
			}
		}
	</script>
</html>